<template>
<div class="dialog-UserItemDialog">
	<el-dialog
		:title="dialogTitle"
		:visible.sync="dialogGoodItemVisible"
		width="600px"
		:before-close="hideDialog">
		<el-form ref='formRef' :model="formData" :rules="formRules" label-width="120px">
			<el-form-item label="订单编号" prop="orderId">
				<el-input v-model="formData.orderId" :disabled='true'></el-input>
			</el-form-item>
			<el-form-item label="用户id" prop="userId">
				<el-input v-model="formData.userId" :disabled='true'></el-input>
			</el-form-item>
		</el-form>
		<el-table :data="formData.goodList" style="width: 100%">
			<el-table-column
				prop="goodId"
				label="商品编号">
			</el-table-column>
			<el-table-column
				prop="goodName"
				label="商品名称">
			</el-table-column>
			<el-table-column
				prop="goodNum"
				label="商品数量">
			</el-table-column>
			<el-table-column
				prop="goodPrice"
				label="商品单价">
			</el-table-column>
			<el-table-column
				prop="goodUnit"
				label="单位">
			</el-table-column>
		</el-table>
		<span slot="footer" class="dialog-footer">
			<el-button v-if='isReadonly' type="primary" @click="hideDialog">关 闭</el-button>
			<el-button v-if='!isReadonly' @click="hideDialog">取 消</el-button>
			<el-button v-if='!isReadonly' type="primary" @click="submitForm">确 定</el-button>
		</span>
	</el-dialog>
</div>
</template>

<script>
// @ is an alias to /src
import { post, get, request } from '@/common/service'

export default {
	name: 'GoodItemDialog',
	props: {
		// 是否只读模式
    	isReadonly: {
    		type: Boolean,
    		default : function () {
    			return false;
    		}
    	},
		// 是否是编辑模式
    	isEdit: {
    		type: Boolean,
    		default : function () {
    			return false;
    		}
    	},
    	// 非新增模式下数据
    	itemData: {
    		type: Object,
    		default : function () {
    			return {};
    		}
    	},
    },
	data () {
        return {
        	// 表单-校验规则
        	formRules: {
        		goodname: [
		            { required: true, message: '请输入商品编号', trigger: 'blur' },
		        ],
        		goodprice: [
		            { required: true, message: '请输入商品价格', trigger: 'blur' },
		        ],
		        gooddesc: [
		            { required: true, message: '请输入商品描述', trigger: 'blur' },
		        ],
        	},
        	// 表单-数据
        	formData: {
        		orderId: '',
        		userId: '',
        		orderStatus: '',
        		goodprice: 0,
        		totalPrices: '',
        		goodList: [],
        	},
        	// 字典-性别
            sexDic: [{
                value: '1',
                label: '男'
            },{
                value: '2',
                label: '女'
            }],
        };
    },
    methods: {
    	// 关闭弹窗
		hideDialog (isReload) {
			this.$store.commit('setDialogGoodItemVisible', false);
			let isReloadFlag = false;
			if(typeof isReload == 'boolean' && isReload) {
				isReloadFlag = true;
			}

			this.$emit('hideDialog', isReloadFlag);
			this.resetForm();
		},
		// 点击确定
		submitForm () {
			this.$refs['formRef'].validate((valid) => {
				if (valid) {
					let goodid = this.formData.goodid || Date.now();
					this.sendForm({
						goodid: goodid + '',
						goodname: this.formData.goodname,
						goodprice: this.formData.goodprice,
						gooddesc: this.formData.gooddesc,
					});
				}
			});
			
		},
		// 发送表单
		sendForm (data) {
			//let method = "addUserItem";
			let method = this.isEdit ? "editGoodItem":"addGoodItem";
			post(this.Api(method), data, {
			    headers: {
			        'Content-Type': 'multipart/form-data'
			    }
			}).then((res) => {
                if(res.status == this.statusCode.successCode) {
                	this.$message.success('操作成功');
                    this.hideDialog(true);
                }
            });
		},
		// 重置表单
		resetForm () {
			this.$refs['formRef'].resetFields();
			this.formData = {
        		goodid: '',
        		goodname: '',
        		goodprice: '',
        		gooddesc: '',
        	};
		},
		// 查询详情
		queryItemDetail () {
			get(this.Api('getOrderItemById'), {
				orderId: this.itemData.orderId,
			}).then((res) => {
                if(res.status == this.statusCode.successCode) {
                	this.formData = res.content.data || {};
                	this.$message.success('操作成功');
                }
            });
		},
    },
    computed: {
		// 弹窗标题
		dialogTitle () {
			if(this.isReadonly) {
				return '详情';
			}
			if(this.isEdit) {
				return '编辑';
			}

			return '新增';
		},
		// 弹窗显隐
		dialogGoodItemVisible () {
			return this.$store.state.dialogGoodItemVisible;
		},
	},
	watch: {
		dialogGoodItemVisible () {
			// 打开弹窗
			if(this.dialogGoodItemVisible) {
				if(this.itemData && this.itemData.orderId) {
					this.queryItemDetail();
					//this.formData = JSON.parse(JSON.stringify(this.itemData));
				}
			}
		}
	}
}
</script>

<style scoped lang="scss">
.dialog-UserItemDialog .el-form-item .el-select{ width: 100%; }
</style>